import {
  AsyncSubject,
  BehaviorSubject,
  interval,
  ReplaySubject,
  Subject,
} from "rxjs";

interface User {
  userName: string;
  userAge: number;
}

// 这个很有用，做一个用来模拟多个组件之前共享状态的例子
export function behaviorSubjectDemo() {
  // 在组件A中一个数据如下：
  const obj: User = {
    userName: "zhgnsan",
    userAge: 19,
  };
  // 可能共享数据相当的 6
  const behaviorSubject = new BehaviorSubject<User>(obj);

  // B 组件订阅了这条数据；默认使用A组件提供的数据；
  behaviorSubject.subscribe((x) => {
    console.log("B组件要用订阅的数据：", x);
  });

  // C 组件也订阅了这条数据；默认使用A组件提供的数据；
  behaviorSubject.subscribe((x) => {
    console.log("D组件要用订阅的数据：", x);
  });

  // 现在D 组件要更新数据了，B 和 C 按D组件给的数据要做相应的业务处理；
  //
  function updateUser(user: User) {
    behaviorSubject.next(user);
  }

  updateUser({
    userName: "lisisi",
    userAge: 30,
  });
}

export function othersSubjectDemo() {
  const replaySubject = new ReplaySubject(2);

  replaySubject.next(1);
  replaySubject.next(2);
  replaySubject.next(3);

  replaySubject.subscribe((x) => console.log(x)); // 2, 3 ； 最多缓存两个;

  const asyncSubject = new AsyncSubject<number>(); // 只有调用完成时才触发 subscribe 最后一个值； 只在 Observable 完成时发出最后一个值。
  asyncSubject.subscribe((x) => console.log(x)); // 3
  asyncSubject.next(1);
  asyncSubject.next(2);
  asyncSubject.next(3);

  asyncSubject.complete();
}

export function subjectDemo2() {
  const source$ = interval(500);

  const subject = new Subject<number>();

  source$.subscribe(subject);

  // 创建多个消费者来消费
  subject.subscribe((x) => {
    console.log("消费者1", x);
  });

  subject.subscribe((x) => {
    console.log("消费者2", x);
  });

  subject.subscribe((x) => {
    console.log("消费者3", x);
  });

  // 5s 以后统一关掉消费
  setTimeout(() => {
    subject.unsubscribe();
  }, 5000);
}

export function subjectDemo1() {
  const subject = new Subject();

  // 订阅 1
  subject.subscribe((x) => {
    console.log("1111", x);
  });
  // 订阅 2
  subject.subscribe((x) => {
    console.log("2222", x);
  });
  setTimeout(() => {
    // 经实验证明是同步的
    for (let index = 0; index < 10; index++) {
      subject.next(index);
    }
  }, 4000);
}
